{% extends "base.html" %}

{% block content %}
<body>
    <div class="container-flex" tabindex="0" hidefocus="true">
        <div class="box-left">
            <div class="left-top">
                <div class="weather-box">
                    <div class="data">
                        <p class="time" id="time">00:00:00</p>
                        <p id="date">2020-5-20 pm Mon</p>
                    </div>
                    <div class="weather">
                        <img id="weatherImg" src="static/images/weather/weather_img01.png" alt="">
                        <div id="weather">
                            <p class="active">多云</p>
                            <p>16-22℃</p>
                            <p>上海市闵行区</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="left-center">
                <div class="title-box">
                    <h6 id="chart1Title">省内疫情趋势</h6>
                </div>
                <div class="chart-box" id="linePlot">
                    <!-- 绘图区 -->
                </div>
            </div>
            <div class="left-bottom" class="select">
                <div class="title-box">
                    <h6 id="chart_2_title">湖北疫情状况</h6>
                </div>
                <div class="chart-box province_map">

                </div>
            </div>
        </div>

        <div class="box-center">
            <div class="center-top">
                <h1>中国疫情可视化</h1>
            </div>
            <div class="center-center">
                <div class="current-num">
                    <div id="confirmed" class="case-num">
                        <div>确诊数</div>
                        <p>12322</p>
                    </div>
                    <div id="cured" class="case-num">
                        <div>治愈数</div>
                        <p>12322</p>
                    </div>
                    <div id="dead" class="case-num">
                        <div>死亡数</div>
                        <p>12322</p>
                    </div>
                </div>
                <img src="static/images/system/line_bg.png" alt="">
                <div class="select-box">
                    <ul id="barType">
                        <li class="active" data-value="1">经济</li>
                        <li data-value="2" onclick="window.location.href='/demo2'">舆情</li>
                    </ul>
                    <ul id="case-select">
                        <li class="active case_button" id="confirmed_button" data-value="3">确诊</li>
                        <li class="case_button" id="cured_button" data-value="4">治愈</li>
                        <li class="case_button" id="dead_button" data-value="5">死亡</li>
                    </ul>
                </div>
            </div>
            <div class="center-bottom" id="china_heatmap_chart">
                <div id="china_heatmap_div">
                    <div id="date_div">
                        <img src="static/images/chinaVis-map/arrow.svg" alt="" id="date_left_arrow" class="date_arrow">
                        <div id="date_rect_div">
                            <div id="date_tooltip" class="date_tooltip_hidden">
                                <span class="date_tooltiptext"></span>
                            </div>
                            <div id="default_tooltip" class="default_tooltip_hidden">
                                <span class="default_tooltiptext"></span>
                            </div>
                        </div>
                        <img src="static/images/chinaVis-map/arrow.svg" alt="" id="date_right_arrow" class="date_arrow">
                    </div>
                    <!-- tooltip -->
                    <div id="my_tooltip" class="my_tooltip_hidden">
                        <span class="tooltiptext"></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="box-right">
            <div class="right-top">
                <div class="title-box">
                    <h6 id="barTitle" class="chart3Title">工业发展情况</h6>
                </div>
                <div class="chart-box" id="chart3">

                </div>
            </div>
            <div class="right-center">
                <div class="title-box">
                    <h6 id="barTitle"  class="chart4Title">价格指数变化图</h6>
                </div>
                <div class="chart-box" id="chart4">
                    <!-- 绘图区 -->
                </div>
            </div>
            <div class="right-bottom">
                <div class="title-box">
                    <h6 id="barTitle"  class="chart5Title">房地产市场发展情况</h6>
                </div>
                <div class="chart-box" id="chart5">
                    <!-- 绘图区 -->
                </div>
            </div>
        </div>
    </div>
{% endblock %}